﻿<!-- 继承公共视图文件 -->
<!-- 方法一：-->
<!-- <extend name="./Application/Admin/View/layout.html" /> -->
<!-- 方法二：-->
<extend name="Public:layout" />
<block name="mid">

<div class="row">
	<div class="col-md-9">
		<div class="panel">
			<div class="panel-heading bk-bg-primary">
				<h6><i class="fa fa-indent red"></i>添加商品</h6>
			</div>
			<div class="panel-body">
			<!-- action=""没有值 ，则默认提交到当前路径-->
				<form action="" method="post" enctype="multipart/form-data" class="form-horizontal ">

					<div class="form-group">
							<label class="col-md-2 control-label" for="file-input">图片</label>
							<div class="col-md-9">
								<input id="file-multiple-input" name="file" multiple type="file">
							</div>
						</div>


					<div class="form-group">
						<label class="col-md-2 control-label" for="text-input">商品名称</label>
						<div class="input-group">
							<input id="input1-group1" name="goods_name" class="form-control" placeholder="请输入商品名称" type="text">
							<span class="input-group-addon"><i class="fa fa-user"></i></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="select">品牌分类</label>
						<div class="col-md-3">
							<select id="select" name="brand_id" class="form-control" size="1">
								<option value="0">请选择品牌分类</option>
								<foreach name="brand_list" item="v">
									<option value="{$v.id}">{$v.name}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="select">分类</label>
						<div class="col-md-3">
							<select id="select" name="cate_id" class="form-control" size="1">
								<option value="0">请选择分类</option>
								<foreach name="cate_list" item="v">
									<option value="{$v.id}">{$v.name}</option>
								</foreach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="select">商品类型</label>
						<div class="col-md-3">
							<select id="goods_type"  class="form-control" size="1">
								<option value="0">请选择商品类型</option>

								<foreach name="goods_type_list" item="v">
									<option value="{$v.id}">{$v.name}</option>
								</foreach>

							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="select">商品规格项</label>
						<div class="input-group col-md-8">
							<div class="row">
								<div class="col-md-20 spec_item">


									<!-- <div class="toggle" data-plugin-toggle="">
										<div class=" active">
											<label for="inline-checkbox{$v.id}">颜色</label>
											<div class="toggle-content" style="display: block;">
												<div class="form-group">
													<div class="col-md-3 input-daterange input-inline" data-plugin-datepicker="">
														<input class="form-control" value="土豪金" disabled type="text">
														<span class="input-group-addon">+</span>
														<input  class="col-md-2 form-control" name="end" type="text">
													</div>

														<div class="col-md-3 input-daterange input-inline" data-plugin-datepicker="">
														<input class="form-control" value="玫瑰红"  disabled type="text">
														<span class="input-group-addon">+</span>
														<input  class="col-md-2 form-control" name="end" type="text">
													</div>
												</div>
											</div>
										</div>
									</div> -->
								</div>
								<div id="spec_list">

								</div>

								<!--
								<div class="table-responsive">
									<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable no-footer">
										<thead>
										<tr>
											<th width="100">规格总计</th>
											<th width="100">库存</th>
											<th width="100">规格描述</th>
											<th width="100">操作</th>
										</tr>
										</thead>
										<tbody>
											<tr>
												<td>7</td>
												<td>数码</td>
												<td>数码</td>
												<td>
													<a class="btn btn-danger" href="table.html#">
													<i class="fa fa-trash-o "></i></a>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
 -->



							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="email-input">市场价</label>
						<div class="input-group">
							<input id="input1-group1" name="marke_price" class="form-control" placeholder="请输入市场价" type="text">
							<span class="input-group-addon"><i class="fa fa-key"></i></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label" for="email-input">本店价</label>
						<div class="input-group">
							<input id="input1-group1" name="shop_price" class="form-control" placeholder="请输入本店价" type="text">
							<span class="input-group-addon"><i class="fa fa-key"></i></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">上架</label>
						<div class="input-group col-md-9">
							<div class="radio-custom radio-inline">
								<input id="inline-radio1" name="is_down" value="1" type="radio">
								<label for="inline-radio1">是</label>
							</div>
							<div class="radio-custom radio-inline">
								<input id="inline-radio2" name="is_show"  value="0" type="radio">
								<label for="inline-radio2">否</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">新品</label>
						<div class="input-group col-md-9">
							<div class="radio-custom radio-inline">
								<input id="inline-radio1" name="is_new" value="1" type="radio">
								<label for="inline-radio1">是</label>
							</div>
							<div class="radio-custom radio-inline">
								<input id="inline-radio2" name="is_show"  value="0" type="radio">
								<label for="inline-radio2">否</label>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">热销</label>
						<div class="input-group col-md-9">
							<div class="radio-custom radio-inline">
								<input id="inline-radio1" name="is_hot" value="1" type="radio">
								<label for="inline-radio1">是</label>
							</div>
							<div class="radio-custom radio-inline">
								<input id="inline-radio2" name="is_show"  value="0" type="radio">
								<label for="inline-radio2">否</label>
							</div>
						</div>
					</div>

					 <div class="form-group">
	                  <label class="col-md-2 control-label" for="text-input">商品描述</label>
	                    <div class="input-group">
	                       <script id="editor" name="desc" type="text/plain" style="width:100%;height:500px;"></script>
	                    </div>
	                </div>

					<button type="submit" class="bk-margin-5 btn btn-success">提交</button>
					<button type="button" class="bk-margin-5 btn btn-success">规格项录入</button>
				</form>
			</div>
		</div>
	</div>
</div>


</block>

<!-- js部区块 -->
<block name="js">

	<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="__ADMIN__assets/js/jquery.validate.min.js"></script>

	<!-- 百度编辑器js文件 -->
	<script type="text/javascript" charset="utf-8" src="__ADMIN__ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="__ADMIN__ueditor/ueditor.all.min.js"> </script>

	<script type="text/javascript">
		$(function(){
			 var ue = UE.getEditor('editor');//初始化百度编辑器


			 //选择商品类型的时候，会在规格项那里追加规格项数据
			 //根据选择的商品类型显示对应的规格
			 $('#goods_type').change(function() {
			 	//先获取选中项的ID
			 	var id=$(this).val();

			 	$.ajax({
			 		type:'get',
			 		url:'{:U("Admin/ajax/getSpec")}',
			 		data:{
			 			'id':id,
			 		},
			 		dataType:'json',
			 		success:function(e){

			 			var html='';

			 			for (i in e) {
			 				html+='<div class="toggle" data-plugin-toggle="">';
							html+='<div style="margin-left:20px;" class=" active">';
							html+='<label for="inline-checkbox">'+e[i].spec_name+'</label>';
							html+='<div class="toggle-content" style="display: block;">';

							for (j in e[i]['spec_item']) {
							html+='<div class="col-md-3 input-daterange input-inline" data-plugin-datepicker="">';
							html+='<input class="form-control" value="'+e[i]['spec_item'][j]['name']+'" disabled type="text">';
							var desc=e[i].spec_name+':'+e[i]['spec_item'][j]['name'];
							html+='<span class="input-group-addon span-btn" spec-id='+e[i]['spec_item'][j]['id']+'  spec-desc="'+desc+'"><b>+</b></span>';
								html+='</div>';
							}

							html+='</div>';
							html+='</div>';
							html+='</div>';
							html+='</div>';
			 			}

			 			//拼接库存
			 			html+='<div class="toggle" data-plugin-toggle="">';
							html+='<div style="margin-left:20px;" class=" active">';
								html+='<label for="inline-checkbox">规格库存</label>';
								html+='<div class="toggle-content" style="display: block;">';

									html+='<div class="col-md-2 input-daterange input-inline" data-plugin-datepicker="">';
										html+='<input class="form-control" name="spec_num" type="text">';
										html+='</div>';
									html+='</div>';
								html+='</div>';
							html+='</div>';
						html+='</div>';


						//追加html
			 			$('.spec_item').html(html);
			 			// alert(html);

			 			//实现点击显示的规格项的后面的span，追加一个input
			 			//实现在规格项后面输入价格
			 			$('.span-btn').click(function() {
			 				// alert(123123);

			 				var icon=$(this).text();//先获取span标签的文本内容
			 				if (icon=='+') {
			 					//将所有的规格的未禁用的input输入框都删除掉
				 				$(this).parent().parent().find(':text[name="price"]').remove();
				 				//将所有的按钮都改成+号
				 				$(this).parent().parent().find('span').text('+');
			 					$(this).text('-');
			 					var inp='<input  class="col-md-7 form-control" name="price" type="text">';
			 					$(this).after(inp);//在inp之后追加
			 				}else{
			 					$(this).text('+');
			 					$(this).next().remove();
			 				}

			 			});
			 		}
			 	})

			 });


			 //规格录入
			 $(':button').click(function() {

			 	//抓取所有录入的规格单价
			 	//抓取规格项中name=price的标签
			 	var price =$('.spec_item input[name="price"]');
			 	//规格项单价循环累计
			 	var _total_price=0;//规格总价格
			 	var _specDesc='';//规格描述
			 	var _sepc_id='';//规格规则
			 	var _num =$(':text[name="spec_num"]').val();//规格库存

			 	//抓取要录入的规格数量
			 	var spec_len=$('.toggle').length;
			 	var text_len=price.length+1;
			 	// alert(price.length);
			 	// alert(spec_len);

			 	if (text_len!=spec_len) {
			 		alert('请将录入信息填写完');
			 		return false;
			 	}

			 	//$(obj)是文本框
			 	price.each(function(i,obj){
			 		_total_price+=parseInt($(obj).val());
			 		_specDesc+=$(obj).prev().attr('spec-desc')+'&nbsp;';//规格描述
			 		_sepc_id+='_'+$(obj).prev().attr('spec-id');//规格规则
			 	})

			 	$.ajax({
			 		url:'{:U("Admin/ajax/append_spec")}',
			 		type:'post',
			 		data:{
			 			'spec_rules':_sepc_id,
			 			'num':_num,
			 			'spec_price':_total_price,
			 			'spec_desc':_specDesc,
			 		},
			 		dataType:'json',
			 		success:function(e){
			 			//根据数据做一个循环拼接
		 				var html='';
					 	html+='<div class="table-responsive">';
							html+='<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable no-footer">';
								html+='<thead>';
								html+='<tr>';
									html+='<th width="100">规格总计</th>';
									html+='<th width="100">库存</th>';
									html+='<th width="100">规格描述</th>';
									html+='<th width="100">操作</th>';
								html+='</tr>';
								html+='</thead>';
								for(i in e){
								html+='<tbody>';
									html+='<tr>';
									html+='<td>'+e[i].spec_rules+'</td>';
										html+='<td width="100">'+e[i].spec_price+'</td>';
										html+='<td>'+e[i].num+'</td>';
										html+='<td width="800">'+e[i].spec_desc+'</td>';
										html+='<td>';
										html+='	<a class="btn btn-danger" href="table.html#">';
										html+='	<i class="fa fa-trash-o "></i></a>';
										html+='</td>';
									html+='</tr>';
								html+='</tbody>';
								}
							html+='</table>';
						html+='</div>';

						$('#spec_list').after(html);//追加
						// $('#spec_list').html(html);//替换,写入规格列表
			 		}
			 	})


			 });

		})
	</script>

</block>